<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../share/js/util.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>正则</h3>
					<div>
						<input type="text" id="txt1" />
						<button onclick="testEmail()">是否邮箱</button>
					</div>
					<div>
						<input type="text" id="txt2" />
						<button onclick="testPhone()">是否手机</button>
					</div>
				</section>
				<section>
					<h3>getEventListeners</h3>
					<div id="divDom">
						<button id="btn01" onclick="testEventListeners()">获取事件侦听器</button>
						<button id="btn02" onclick="testHasDom()">动态检测DOM存在</button>
					</div>
				</section>
			</div>
			<div class="col-1">
			</div>
			<div class="col-1">
				<ul id="log" class="d-list mt-10"></ul>
			</div>
		</div>
		<script>
			function testEmail() {
				var text = $("#txt1").val();
				console.log(util.isEmail(text));
			}

			function testPhone() {
				var text = $("#txt2").val();
				console.log(util.isPhone(text));
			}

			function testEventListeners() {
				let all = getEventListeners(this);
				alert(all);
			}

			function testHasDom() {
				console.log("正在动态创建元素 div01...")
				setTimeout(() => {
					$("<div id='div01'>Hello</div>").appendTo($("#divDom"));
					console.log("已动态创建元素 div01")
				}, 3000);


				console.log("开始查找元素 div01...")
				util.waitDOM("#div01", 500).then(() => {
					console.log("已找到元素 #div01, 内容: " + $("#div01").text());
				});

			}
		</script>
	</body>
</html>
